<template>
    <div class="container">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm" :size="formSize" status-icon>
            <template v-for="(item, index) in formList">
                <el-form-item :label="item.label" :prop="item.prop" :key="index" v-if="item.type === 'select'">
                    <el-select v-model="ruleForm[item.prop]" :placeholder="item.placeholder" clearable filterable
                        :multiple="item.multiple || false">
                        <el-option :label="item[_item.label] || _item.label" :value="item[_item.value] || _item.value"
                            v-for="(_item, _index) in item.options" :key="_index" />
                    </el-select>
                </el-form-item>
                <el-form-item :label="item.label" :prop="item.prop" :key="index" v-if="item.type === 'input'">
                    <el-input v-model="ruleForm[item.prop]" :placeholder="item.placeholder"
                        :type="item.model || 'text'"></el-input>
                </el-form-item>
                <el-form-item :label="item.label" :prop="item.prop" :key="index" v-if="item.type === 'switch'">
                    <el-switch v-model="ruleForm[item.prop]" class="ml-2"
                        :style="{ '--el-switch-on-color': item.on || '#13ce66', '--el-switch-off-color': item.off || '#ff4949' }" />
                </el-form-item>
                <el-form-item :label="item.label" :prop="item.prop" :key="index"
                    v-if="item.type === 'datetimerange' || item.type === 'datetime'">
                    <el-date-picker v-model="ruleForm[item.prop]" :type="item.type || 'datetime'"
                        start-placeholder="开始时间" end-placeholder="结束时间" :format="item.format || 'YYYY-MM-DD HH:mm:ss'"
                        date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" />
                </el-form-item>
                <el-form-item :label="item.label" :prop="item.prop" :key="index" v-if="item.type === 'cascader'">
                    <el-cascader v-model="ruleForm[item.prop]" :options="item.options" :props="item.props || {}"
                        :placeholder="item.placeholder" :show-all-levels="item.showAllLevels || true" clearable
                        filterable />
                </el-form-item>
                <el-form-item :label="item.label" :prop="item.prop" :key="index" v-if="item.type === 'radio'">
                    <el-radio-group v-model="ruleForm[item.prop]">
                        <el-radio :value="item[_item.value] || _item.value" v-for="(_item, _index) in item.options"
                            :key="_index">{{ item[_item.label] || _item.label }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item :label="item.label" :prop="item.prop" :key="index" v-if="item.type === 'checkbox'">
                    <el-checkbox-group v-model="ruleForm[item.prop]">
                        <el-checkbox :label="item[_item.label] || _item.label" :value="item[_item.value] || _item.value"
                            v-for="(_item, _index) in item.options" :key="_index" />
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item :key="index" v-if="item.type === 'submit'">
                    <el-button @click="resetForm(ruleFormRef)" v-if="item.all && item.all.reset">{{ item.all.reset ||
                        '重置'
                        }}</el-button>
                    <el-button type="primary" @click="submitForm(ruleFormRef)" v-if="item.all && item.all.submit">{{
                        item.all.submit || '提交' }}</el-button>
                    <slot name="submit" :item="item" :row="ruleForm"></slot>
                </el-form-item>
            </template>
        </el-form>
    </div>


</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
const props = defineProps(['formList'])
interface RuleForm {
    [key: string]: any
}
const formList = ref<RuleForm>([])
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({})
const rules = reactive<FormRules<RuleForm>>({})
const type = ref(['select', 'cascader', 'radio', 'switch', 'checkbox'])
formList.value = props.formList

function generateRules() {
    formList.value.forEach((item: any) => {
        if (item.rules) {
            type.value.forEach(type => {
                if (item.type === type) {
                    rules[item.prop] = [{ required: true, message: `请选择${item.label}`, trigger: 'change' }];
                } else {
                    rules[item.prop] = [{ required: true, message: `请输入${item.label}`, trigger: 'blur' }];
                }
            })
        }
    });
}
generateRules()


const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!', ruleForm)
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>
<style>
.container {
    width: 500px;
    margin: 30px auto;
}
</style>